<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery-1.10.2.js" type="application/javascript"></script>
    <script src="js/jsrender.min.js" type="application/javascript"></script>
</head>
<script id="historyTmpl" type="text/x-jsrender">
<div class="history-date">
            <h2 class="first"><a><span class="year">{{:year}}</span>年</a></h2>
            <ul class="first show">{{:content}}</ul>
        </div>
</script>

<script id="itemTmpl" type="text/x-jsrender">
<li>
     <h3><span class="item-date"></span>{{:date}}<span class="item-year">{{:year}}</span></h3>
     <dl>
         <dt>{{:Title}}</dt>
         <dd><span>{{:Details}}</span>
         </dd>
     </dl>
</li>
</script>
<body>

<div class="content">
    <div class="title">
        <h3>更新日志</h3>
    </div>
    <div class="history"></div>
</div>

<script>
    $.get("http://kkoa.test.tops001.com/Changelog/List", function (data) {
        if (data.Data.RecordsNumber > 0) {
            var array = [];
            var groupObj = groupByYear(data.Data.Records);
            var historyArray = createHistoryDiv(groupObj.key, groupObj.group);
            $(".history").html(historyArray.join(""));
            $(".history .history-date").first().find("ul>li").first().addClass("green");
        }
    });

    function groupByYear(records) {
        var sorted = records.sort(function (o1, o2) {
            if (o2.Year === o1.Year) {
                return new Date(o2.ReleaseTime).getTime() - new Date(o1.ReleaseTime).getTime();
            }
            return o2.Year - o1.Year;
        });

        var group = {};
        var key = [];
        sorted.forEach(function (item) {
            if (group[item.Year] === undefined) {
                key.push(item.Year);
                group[item.Year] = [];
            }
            group[item.Year].push(item);
        });
        return {key: key, group: group};
    }

    function createHistoryDiv(keys, objs) {
        var historyArray = [];
        keys.forEach(function (year) {
            var para = {year: year, content: createLiItem(objs[year])};
            var template = $.templates("#historyTmpl");
            var htmlOutput = template.render(para);
            historyArray.push(htmlOutput);
        });
        return historyArray;
    }

    function createLiItem(lis) {
        var array = [];
        lis.forEach(function (item) {
            var datePara = item.ReleaseTime.split("-");
            var year = datePara[0];
            var date = datePara[1] + "." + datePara[2];
            var data = {Title: item.Title, Details: item.Details, year: year, date: date};
            var template = $.templates("#itemTmpl");
            var htmlOutput = template.render(data);
            array.push(htmlOutput);
        });
        return array.join("");
    }

    $(document).ready(function () {
        $(".history").on("click", "h2", function () {
            var ul = $(this).siblings("ul");
            if (ul.hasClass("show")) {
                ul.slideUp().removeClass("show");
            }
            else {
                ul.slideDown().addClass("show");
            }
        });
    });
</script>
</body>
</html>